<template>
	<view class="services">
		<NavBar title="服务点"></NavBar>
		<view class="content">
			<div class="location" @click="handleChooseLocation">
				<image src="@/static/icons/location.png"></image>
				<view class="title">{{ form.name }} </view>
				<u-icon name="arrow-right" color="#000" bold></u-icon>
			</div>
			<Search v-model="form.search" @change="getList"></Search>
			<!-- <div class="tabs">
				<Tabs :tabs="tabs" @change="handleTabsChange" :active="active"></Tabs>
			</div> -->
			<view class="filter">
				<!-- <view class="li">
					<text>智能排序 </text>
					<image class="" src="@/static/icons/arrow.png"></image>
				</view> -->
				<view class="li">
					<text>距离优先 </text>
				</view>
				<!-- <view class="li">
					<text>筛选 </text>
					<image class="" src="@/static/icons/arrow.png"></image>
				</view> -->
			</view>
			<up-empty mode="list" v-if="!list.length"></up-empty>
			<view class="list">
				<view class="item" v-for="(item, index) in list" :key="index">
					<image src="@/static/home/banner2.png" mode="aspectFill"></image>
					<view class="cont">
						<view class="title">{{ item.title }}</view>
						<view class="text">{{ item.address }}</view>
						<view class="text">{{ item.nums }}单</view>
						<view class="km">{{ Number(item.distance).toFixed(1) }}km</view>
					</view>
					<view class="buttons">
						<view class="btn default" @click="handleLookLocation(item)">
							<image src="/static/icons/location.png" alt=""></image>导航
						</view>
						<view class="btn default" @click="callIphone(item.mobile)">
							<image src="/static/icons/tell.png" alt=""></image>电话
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
import Search from '@/components/Search.vue';
import Tabs from '@/components/Tabs.vue';
import uIcon from "@/uni_modules/uview-plus/components/u-icon/u-icon.vue";

import { getServiceList } from '@/api/services'
import {
	reactive,
	toRefs
} from 'vue'
const state = reactive({
	list: [],
	form: {
		search: "",
		longitude: "",
		latitude: "",
		name: "湖南省长沙市岳麓区烟农路",
		limit: 10,
		page: 1
	},
	tabs: [{
		label: "安装服务点",
		value: 0
	},
	{
		label: "维修服务点",
		value: 1
	}
	],
	active: 0
})
//获取列表
function getList () {
	uni.showLoading({ title: '加载中' });
	getServiceList(state.form).then(res => {
		state.list = res.data
		uni.hideLoading()
	})
}
//获取定位
function handleGetLocation () {
	uni.authorize({
		scope: 'scope.userLocation',
		success: () => {
			console.log('用户已授权');
			uni.getLocation({
				type: 'gcj02', // 返回可以用于uni.openLocation的经纬度
				success: res => {
					console.log(res, 11)
					state.form.latitude = res.latitude
					state.form.longitude = res.longitude
					getList()
				},
				fail: err => {
					console.error('获取位置信息失败', err);
					// 处理获取位置信息失败后的逻辑
				}
			});

		},
		fail () {
			console.log('用户拒绝授权');
			// 引导用户手动打开授权页面  
			uni.openSetting({
				success (res) {
					console.log(res.authSetting['scope.userLocation']);
				}
			});
		}
	});
}
//选择位置
function handleChooseLocation () {
	uni.authorize({
		scope: 'scope.userLocation',
		success: () => {
			uni.chooseLocation({
				success: (res) => {
					state.form.longitude = res.longitude
					state.form.latitude = res.latitude
					state.form.name = res.name
					getList()
				}
			})
		}
	})
}

//查看位置
function handleLookLocation (item) {
	wx.openLocation({
		latitude: Number(item.latitude), // 目标位置的纬度，浮点数，范围为90~-90
		longitude: Number(item.longitude), // 目标位置的经度，浮点数，范围为180~-180
		success () {
			console.log('地图打开成功');
		},
		fail (err) {
			console.error('地图打开失败', err);
		}
	});
}
//调起电话
function callIphone (phoneNumber) {
	uni.makePhoneCall({
		phoneNumber: phoneNumber
	})
}
function handleTabsChange (item) {
	state.active = item.value
}
handleGetLocation()
const {
	loading,
	list,
	tabs,
	active,
	form
} = toRefs(state)
</script>
<style lang="scss" scoped>
.content {
	border-radius: 22rpx 22rpx 0rpx 0rpx;
	background: #FFFFFF;
	padding: 36rpx;
	position: relative;
	z-index: 1;

	.location {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 36rpx;

		image {
			width: 27rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}

		.title {
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
			line-height: 33rpx;
			margin-right: 24rpx;
		}
	}

	.tabs {
		margin-top: 36rpx;
		margin-bottom: 48rpx;
	}

	.filter {
		margin: 26rpx 0;
		display: flex;

		.li {
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			line-height: 28rpx;

			image {
				width: 28rpx;
				height: 15rpx;
			}
		}

		.li+.li {
			margin-left: 26rpx;
		}
	}

	.list {
		margin-top: 30rpx;

		.item {
			display: flex;
			margin-bottom: 36rpx;

			&>image {
				width: 155rpx;
				height: 155rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-right: 24rpx;
			}

			.cont {
				flex: 1;
				margin-right: 24rpx;

				.title {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					line-height: 33rpx;
					margin-bottom: 8rpx;
				}

				.text {
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
					line-height: 23rpx;
					margin-bottom: 8rpx;
				}

				.km {
					font-weight: 500;
					font-size: 22rpx;
					color: #58DBCF;
					line-height: 26rpx;
				}
			}

			.buttons {
				.btn {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 55rpx 55rpx 55rpx 55rpx;
					font-weight: 500;
					font-size: 20rpx;
					line-height: 23rpx;

					image {
						height: 25rpx;
						width: 25rpx;
						margin-right: 12rpx;
					}
				}

				.btn.primary {
					background-color: #58DBCF;
					color: #fff;
				}

				.btn.default {
					color: #58DBCF;
					border: 1rpx solid #58DBCF;
				}

				.btn+.btn {
					margin-top: 24rpx;
				}
			}
		}
	}
}
</style>